<template>
  <div class="pageWrap">
    <h1 class="title">新建页面</h1>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="页面名称">
        <el-input v-model="form.name" placeholder="请输入页面名称"></el-input>
      </el-form-item>
      <el-form-item label="参与人">
        <el-input v-model="form.join_people" placeholder="请输入参与人"></el-input>
      </el-form-item>
      <el-form-item label="页面路由">
        <el-input v-model="form.router" placeholder="请输入页面路由"></el-input>
      </el-form-item>
      
      <el-form-item label="页面属性">
        <el-radio-group v-model="form.type">
          <el-radio label="pc" value="pc"></el-radio>
          <el-radio label="mobile" value="mobile"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="开启ssr">
        <el-switch v-model="form.open_ssr"></el-switch>
      </el-form-item>
      <el-form-item label="页面描述">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">
          {{
            form.id ? "立即更新" : "立即创建"
          }}
        </el-button>
         <router-link to="/">
            <el-button>取消</el-button>
        </router-link>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
export default {
  name: "list",
  data() {
    return {
      form: {
        name: "",
        join_people: "",
        router: "",
        type: "pc",
        open_ssr: false,
        desc: "",
      },
    };
  },
  methods: {
    onSubmit() {
      if(this.form.id){
        console.log(1)
        this.$http.post("/page/update",this.form).then((res) => {
            if(res.success){
              this.$message({
                message: '更新成功',
                type: 'success'
              });
            }
        })
      }else{
        this.$http.post("/page/add",this.form).then((res) => {
            if(res.success){
              this.$message({
                message: '添加页面成功',
                type: 'success'
              });
            }
        })
      }
      
    },
    init(id){
      this.$http.post("/page/get", { id: id }).then((res) => {
        console.log(res.data)
        this.form.id = id;
        Object.keys(this.form).forEach(v => {
          if(v === "open_ssr"){
            this.form[v] = String(res.data[v]) === "true" ? true: false;
          }else{
            this.form[v] = res.data[v]
          }
          
        });
      });
    }
  },
  created() {
    if(this.$route.query.id){
      
      this.init(this.$route.query.id)
    }
  },
};
</script>
<style lang="stylus" scoped>
.pageWrap 
  padding: 20px;
  width 1000px;
  margin  0 auto
  .title
    margin-bottom 40px
</style>

 